iT邦幫忙

2022 iThome 鐵人賽

DAY 4
1
Mobile Development

Android Studio 30天學習系列 第 4

Android Studio 30天學習-DAY04_畫面編排01(Layout功能)

  • 分享至 

  • xImage
  •  

今天會來做畫面編排的練習-LinearLayout的練習

首先先創立一個新專案,檔案名稱建議是以目前所練習的主題LinearLayout來做命名,這樣方便以後的檔案管理。

  • LinearLayout以我自己感覺起來是一個十分方便的工具,配合後面會說的GuideLine使用起來會比較好,經過自己的理解之後LinearLayout就像是一個盒子,裡面可以包幾個工具組合成一個小區塊,再透過排版來裝飾畫面。
    https://ithelp.ithome.com.tw/upload/images/20220718/20150370m0GyUAqUwS.png

activity_main.xml檔案

https://ithelp.ithome.com.tw/upload/images/20220718/20150370MmJ7tYYEG6.png

  1. 在這個畫面的右上角有CodeSplitDesign三個呈現方式,Code顧名思義就是只有程式碼、Split是程式碼與預覽畫面同在,Design是可以透過拉取的方式操作而顯示畫面上也只有預覽畫面,拉取的動作也能直接拉至預覽畫面上。
  2. Design畫面中的Palette這個區塊是包含了常用的所有功能,這些功能是可以透過拖拉的方式拉到下方的Component Tree欄位或是直接拉到畫面上。
  3. Component Tree的構造可以想像成是一個樹狀圖,最頂層的物件包含著以下所有的物件,底下的物件也是依此類推。
  4. 預覽畫面:及時預覽呈現目前已經設定完成的物件所在位置。

LinearLayout垂直向的排列

Palette->Layouts的組別將LinearLayout拉取到下方的Component Tree,拉下來之後再拉幾個TextView來看效果,TextView可以依照自我的需求可以多拉幾個比較能觀察到這幾個功能的不同之處。
https://ithelp.ithome.com.tw/upload/images/20220718/20150370vBByCGPyF7.pnghttps://ithelp.ithome.com.tw/upload/images/20220718/20150370xuMNb8VnW8.png
從藍圖上面比較能夠清楚看到格式的呈現方式。
這時候可以切換到Split方法觀看LinearLayout的XML程式碼。

在Split觀看LinearLayout的程式碼

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Hello World!" />
        </LinearLayout>
    </LinearLayout>

這邊可以看到LinearLayout的寬和高的呈現方式,我這邊是把垂直向LinearLayout的高改成wrap_content,這是一個會依照文字大小更改高度的功能,更改完成之後這樣底下的空間就會空出來了,這時我們使用複製貼上將垂直向的LinearLayout多複製幾個來觀看排版效果。
https://ithelp.ithome.com.tw/upload/images/20220718/20150370YLQpbmciz0.pnghttps://ithelp.ithome.com.tw/upload/images/20220718/20150370czWcYkk866.png
這就是LinearLayout垂直方向的效果

LinearLayout水平向的排列

我就直接貼程式碼以及藍圖預覽呈現方式了。

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TextView" />
        </LinearLayout>
    </LinearLayout>

https://ithelp.ithome.com.tw/upload/images/20220718/201503704beIxaArxY.png
與垂直向的排列相同作法
https://ithelp.ithome.com.tw/upload/images/20220718/20150370oLFRcVJVN1.png

以上就是今天練習的內容,明天會練習GuideLine功能。


上一篇
Android Studio 30天學習-DAY03_Android-Studio虛擬機相關設定
下一篇
Android Studio 30天學習-DAY05_畫面編排02(GuideLine)
系列文
Android Studio 30天學習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言